<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<view class="headers">
			<u--input placeholder="搜索" border="surround" v-model="req.name" @change="change" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" shape="circle"></u--input>
			<view class="_select">
				<view class="leftView">
					<view @click="picker_show = true">
						<text>{{ req.teacher_category_name || '学习语种' }}</text>
						<u-icon :name="picker_show == true ? 'arrow-up-fill' : 'arrow-down-fill'" color="#333"
							size="15"></u-icon>
					</view>
					<view @click="teacherCountry_show = true">
						<text>{{ req.country_name || '来自国家' }}</text>
						<u-icon :name="teacherCountry_show == true ? 'arrow-up-fill' : 'arrow-down-fill'" color="#333"
							size="15"></u-icon>
					</view>
				</view>
				<view class="rightView" @click="select">
					<u--image :showLoading="true" src="../../../static/Home/sx.png" width="24rpx" height="20rpx"
						radius="0"></u--image>
					<text :style="{ color: $store.state.primaryColor }">确定筛选</text>
				</view>
			</view>
		</view>
		<view v-for="(item, index) in lists" :key="index" class="listItem">
			<video id="myVideo" :src="item.video" @error="videoErrorCallback"
				:poster="`${item.video}?x-oss-process=video/snapshot,t_${seek},f_jpg`"></video>
			<view class="BoxOne">
				<u--image :showLoading="true" :src="item.avatar" width="94rpx" height="94rpx" radius="0" shape="circle"
					@click="checkImage(item.avatar)"></u--image>
				<view class="BoxContent">
					<view class="BoxTop marginBottom">
						<text class="title">{{ item.name || '' }}</text>
						<text style="color: #888888; margin-left: 15rpx">{{ item.country.name || '' }}教师</text>
					</view>
					<view class="BoxTop">
						<text class="Newtitle">{{ item.speciality || '' }}</text>
					</view>
				</view>
			</view>
			<view class="solid"></view>
			<view class="headers_title">
				<view class="view" :style="{ backgroundColor: $store.state.primaryColor }"></view>
				<text>{{ item.description || '' }}</text>
			</view>
			<view class="user_click">
				<u--image :showLoading="true" src="../../../static/static/laoshiyuyan.png" width="52rpx" height="52rpx"
					radius="0" @click="addFriends(item)"></u--image>
				<text style="font-size:26rpx;">联系老师</text>
				<u--image :showLoading="true" src="../../../static/static/dianzan_yes.png" width="44rpx" height="40rpx"
					radius="0" v-if="item.is_collect" @click="onZan(item, index)"></u--image>
				<u--image :showLoading="true" src="../../../static/dianzan_no.png" width="44rpx" height="40rpx"
					radius="0" v-if="!item.is_collect" @click="onZan(item, index)" mode="aspectFit"></u--image>
				<button @click="linkUrl(`/pages/detail/Teacher_details?id=${item.id}`)"
					:style="{ background: $store.state.buttonColor }">查看详情</button>
			</view>
		</view>
		<u-picker :show="picker_show" :columns="columns" keyName="name" @confirm="confirm"
			@cancel="picker_show = false"></u-picker>
		<u-picker :show="teacherCountry_show" :columns="teacherCountrys" keyName="name"
			@confirm="teacherCountrys_confirm" @cancel="teacherCountry_show = false"></u-picker>
	</view>
</template>
<script>
	import {
		teacherLists,
		collectTeacher,
		teacher_category,
		teacherCountry,
		getJsSdk
	} from '../../../api/Teacher.js';
	import {
		imAddCreateByUser
	} from '../../../api/imInterface.js';
	import jWeixin from '../../../js_sdk/jweixin-module';
	export default {
		data() {
			return {
				seek: 2,
				picker_show: false,
				teacherCountry_show: false,
				lists: [],
				columns: [{
					id: 0,
					name: '全部'
				}], //学习语种数据源
				teacherCountrys: [{
					id: 0,
					name: '全部'
				}], //所属国家数据源
				req: {
					shop_id: 1, //门店ID
					teacher_category_name: '', //分类名称
					teacher_category_id: '', //老师分类ID
					country_name: '', //国家名称
					country_id: '', //国家ID
					page: 1,
					limit: 10,
					name: '', //搜索名字
					date: '', //搜索日期
					times: '' //搜索时间段
				},
				totalPage: 0,
				zan: true
			};
		},
		onLoad() {
			//uni.setStorageSync('shop_id', 1);
			this.req.shop_id = uni.getStorageSync('shop_id') || 1;
			this.teacher_category();
			this.teacherCountry();
			this.share();
		},
		onReachBottom() {
			this.loadNextPage();
		},
		onShow() {
			this.req.page = 1;
			this.lists = []
			this.teacherLists();
		},
		methods: {
			checkImage(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			/**
			@method 分享
			**/
			async share() {
				try {
					var th_is = this;
					const res = await getJsSdk({
						url: '/pages/Tabbar/Teacher/Teacher'
					});
					jWeixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data["appId"], // 必填，公众号的唯一标识
						timestamp: res.data["timestamp"], // 必填，生成签名的时间戳
						nonceStr: res.data["nonceStr"], // 必填，生成签名的随机串
						signature: res.data["signature"], // 必填，签名
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(function() {
						// 分享给朋友
						jWeixin.updateAppMessageShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							type: 'link', // 分享类型,music、video或link，不填默认为link
							success: function() {
								// 分享成功回调
							}
						});
						// 分享到朋友圈
						jWeixin.updateTimelineShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							success: function() {
								// 分享成功回调
							}
						});
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			// 加载下一页数据
			async loadNextPage() {
				// 如果当前页面小于总页数，则加载下一页数据
				if (this.lists.length < this.totalPage) {
					this.req.page++;
					await this.teacherLists();
				}
			},
			videoErrorCallback(err) {
				console.log(err);
			},
			/**
			@method 学习语种u-picker确认
			**/
			confirm(e) {
				this.req = {
					...this.req,
					...{
						page: 1,
						teacher_category_name: e.value[0].name || '',
						teacher_category_id: e.value[0].id || ''
					}
				};
				this.teacherLists();
				this.picker_show = false;
				console.log(e.value[0]);
			},
			/**
			@method 来自国家u-picker确认
			**/
			teacherCountrys_confirm(e) {
				this.req = {
					...this.req,
					...{
						page: 1,
						country_name: e.value[0].name || '',
						country_id: e.value[0].id || ''
					}
				};
				this.teacherLists();
				this.teacherCountry_show = false;
			},
			/**
			@method 老师列表
			**/
			async teacherLists() {
				try {
					let req = this.req
					const res = await teacherLists(req);
					this.lists = [...this.lists, ...res.data.data];
					this.totalPage = res.data.total;
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 老师分类
			**/
			async teacher_category() {
				try {
					let that = this
					const res = await teacher_category();
					console.log(res.data)
					res.data.forEach(function(item) {
						//console.log(that.columns)
						that.columns.push(item);
					});
					//console.log(that.columns)
					that.columns = [...[that.columns]];
					console.log(that.columns)
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 老师所属国家
			**/
			async teacherCountry() {
				try {
					let that = this
					const res = await teacherCountry();
					//console.log([{id:0,name:'全部'}])
					res.data.forEach(function(item) {
						//console.log(that.columns)
						that.teacherCountrys.push(item);
					});
					//console.log(that.columns)
					that.teacherCountrys = [...[that.teacherCountrys]];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			onZan(item, index) {
				console.log(this.zan)
				if (!this.zan) {
					return false;
				}
				this.zan = false
				// 防抖操作
				//当没有频繁点击后，最后执行的定时器
				//里面写执行代码
				if (this.lists[index].is_collect) {
					this.lists[index].is_collect = false
					this.collectTeacher(item, 0);
				} else {
					this.lists[index].is_collect = true
					this.collectTeacher(item, 1);
				}
				let that = this
				setTimeout(() => {
					that.zan = true
				}, 2000)
			},
			/**
			@method 老师列表
			**/
			async collectTeacher(item, type) {
				try {
					let that = this
					const res = await collectTeacher({
						teacher_id: item.id || '',
						type: type //0取消收藏 1收藏
					});
					if (res.code == 1) {
						// that.lists = [];
						// that.teacherLists();
						uni.showToast({
							title: type == 0 ? '取消收藏成功' : '已收藏',
							icon: 'none',
							duration: 2000
						});
					} else {
						that.lists = [];
						that.teacherLists();
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			async addFriends(item) {
				console.log(item, '2222');
				// item.teacher_category_id
				let res = await imAddCreateByUser({
					teacher_id: item.id
				});
				// console.log(res)
				item.receiver_id = item.im_id;
				uni.navigateTo({
					url: `/pages/Tabbar/Teacher/chatPage?params=${JSON.stringify(item)}`
				});
			},
			select() {
				console.log(this.req);
				this.lists = [];
				this.teacherLists()
			},
			change(e) {
				console.log(e);
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			}
		}
	};
</script>
<style>
	page {
		background-color: #f6f7f9;
	}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		width: 100%;

		.headers {
			width: auto;
			height: auto;
			padding: 30rpx 30rpx 20rpx 30rpx;

			/deep/ .u-input {
				background-color: #fff;
			}

			._select {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.leftView {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					border-radius: 8px;
					padding: 15rpx 30rpx 15rpx 30rpx;

					view {
						display: flex;
						align-items: center;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #4c4c4c;
						margin-right: 10rpx;
					}
				}

				.rightView {
					background-color: rgba(255, 255, 255, 1);
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					// background-color: #fff;
					border-radius: 20rpx;
					padding: 15rpx 30rpx 15rpx 30rpx;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #029cfe;
						margin-left: 10rpx;
					}
				}
			}
		}

		.user_click {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			button {
				width: 408rpx;
				height: 62rpx;
				background: #029cfe;
				color: #fff;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				margin: 0px;
			}
		}

		.headers_title {
			width: auto;
			margin: 0px auto;
			display: flex;
			margin-top: 20rpx;

			.view {
				width: 10rpx;
				height: 34rpx;
				background: #029cfe;
				border-radius: 6rpx;
			}

			.flex {
				display: flex;
				align-items: center;
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-left: 15rpx;
			}
		}

		.listItem {
			width: 85%;
			background: #ffffff;
			border-radius: 16rpx;
			background-color: #fff;
			margin: 0px auto;
			padding: 22rpx;
			margin-top: 24rpx;

			#myVideo {
				width: 650rpx;
				height: 322rpx;
				border-radius: 16rpx;
			}

			.solid {
				width: auto;
				//height: 2rpx;
				border: 1rpx solid #e9e9e9;
				background-color: #e9e9e9;
				margin-top: 20rpx;
			}

			.BoxOne {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.marginBottom {
					margin-bottom: 10rpx;
				}

				.BoxTop {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					text {
						display: block;
						font-size: 24rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
					}

					.Newtitle {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>